<template>
	<el-menu
		:default-active="route.path"
		class="el-menu-vertical-demo"
		:collapse="userStore.showMenu"

		:close-on-click-outside="false"
		:router="true"
		background-color="rgb(52,64,78)"
		text-color="#fff"
		active-text-color="#ffd04b"
		:unique-opened="true">
		<el-menu-item>
			<el-icon :size="30">
				<Operation />
			</el-icon>
			<template #title>
				<h1 class="title2">后勤管理员</h1>
			</template>
		</el-menu-item>
		<el-divider border-style="solid" />

		<el-menu-item index="/home/index">
			<el-icon><HomeFilled /></el-icon>
			首页</el-menu-item
		>

		<!--角色管理  -->
		<el-sub-menu index="1">
			<template #title>
				<el-icon><Avatar /></el-icon>

				<span>角色管理</span>
			</template>

			<!-- 宿管管理 -->
			<el-menu-item index="/home/domisys">宿管管理</el-menu-item>
			<!-- 学生管理-->
			<el-menu-item index="/home/stuSys">学生管理</el-menu-item>

		</el-sub-menu>

		<!-- 系统日志 -->
		<el-menu-item index="/home/log">
			<el-icon><DocumentCopy /></el-icon>系统日志</el-menu-item
		>

		<!-- 各栋数据统计 -->
		<el-menu-item index="/home/statics">
		
			<el-icon><ScaleToOriginal /></el-icon>
			<template #title>卫生检查管理</template>
		</el-menu-item>

		<!-- 宿舍分配  -->
		<el-menu-item index="/home/alloc">
			<el-icon><Histogram /></el-icon>
			<template #title>宿舍管理</template>
		</el-menu-item>

		<!-- 假期管理 -->
		<el-menu-item index="/home/perf">
			<el-icon><MagicStick /></el-icon>
			<template #title>假期管理</template>
		</el-menu-item>

		<!-- 换房申请管理 -->
		<el-menu-item index="/home/mas_apply">
			<el-icon><Operation /></el-icon>
			<template #title>换房申请管理</template>
		</el-menu-item>

		<!-- 通告栏 -->
		<el-menu-item index="/home/m_notice">
			<el-icon><Message /></el-icon>
			<template #title>通告栏</template>
		</el-menu-item>

		<!-- 公共设施管理 -->
		<el-menu-item index="/home/check">
			<el-icon><List /></el-icon>
			<template #title>公共设施管理</template>
		</el-menu-item>

		<!-- 个人中心 -->
		<el-menu-item index="/home/mas_center">
			<el-icon><Avatar /></el-icon>
			<template #title>个人中心</template>
		</el-menu-item>
	</el-menu>
</template>

<script setup>

import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const route = useRoute()

</script>



<style scoped lang="scss">
h1.title2 {
	font-size: 25px;
}
.el-menu{
	height: calc(100vh - 71px)
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
	height: calc(100vh - 71px);
	.nav-switch {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
}

.el-menu {
	--el-menu-bg-color: rgb(0, 0, 0);
}

.el-sub-menu {
	&:deep(.el-menu) {
		background-color: #00000042;
	}
}
</style>
